{% extends "base.html" %}
{% load bootstrap3 %}
{% block title %}设备状态查询{% endblock %}
{% block head_script_block %}
<script src="/js/show_rawdata_realtime.js"></script>

<script type="text/javascript" language="javascript" class="init">

    $(document).ready(function() {
        $( "#ap_status" ).dataTable(
                {
                    "sDom": 'T<"clear">lfrtip',
                    "tableTools": {
                        "aButtons": [
                            {
                                "sExtends": "csv",
                                "oSelectorOpts": {
                                    page: 'all'
                                },
                                "sButtonText": "导出CSV"
                            },
                            {
                                "sExtends": "xls",
                                "oSelectorOpts": {
                                    page: 'all'
                                },
                                "sButtonText": "导出EXCEL"
                            }
                        ]
                    },
                    language: {
                        "sProcessing": "处理中...",
                        "sLengthMenu": "显示 _MENU_ 项结果",
                        "sZeroRecords": "没有匹配结果",
                        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                        "sInfoPostFix": "",
                        "sSearch": "搜索:",
                        "sUrl": "",
                        "sEmptyTable": "表中数据为空",
                        "sLoadingRecords": "载入中...",
                        "sInfoThousands": ",",
                        "oPaginate": {
                            "sFirst": "首页",
                            "sPrevious": "上页",
                            "sNext": "下页",
                            "sLast": "末页"
                        },
                        "oAria": {
                            "sSortAscending": ": 以升序排列此列",
                            "sSortDescending": ": 以降序排列此列"
                        }
                    }
                });
    } );
</script>
{% endblock %}

{% block body_content_block %}




<div class="span4" name="raw">
    <legend>公司选择</legend>
    <form  action="." method="POST">{% csrf_token %}
        {% bootstrap_form myForm layout='horizontal' %}
        <input class='btn btn-primary' id='button' type='submit' value='查询'/>
    </form>
</div>
<div class="span8">
    <legend>设备使用记录</legend>
    {% if datas %}


    <table class="table table-bordered" id="ap_status">
        <thead>
        <tr>
            {% for fieldname in fieldNames %}
                <th>{{ fieldname }} </th>
            {% endfor %}
        </tr>
        </thead>
        <tbody>
        {% for data in datas %}
        <tr>
            {% for field in fields %}
                <td>
                    {% for key , value in data.iteritems %}
                        {% ifequal key field %}
                            {{ value }}
                        {% endifequal %}
                    {% endfor %}
                </td>
            {% endfor %}
        </tr>
        {% endfor %}
        </tbody>
    </table>

<!--    <table class="table table-bordered" id="ap_status">
        <thead>
        <tr>
            <th>门店编号</th>
            <th>门店名</th>
            <th>设备id</th>
            <th>当前状态</th>
            <th>首次上线</th>
            <th>最近上线</th>
            <th>最后下线</th>
        </tr>
        </thead>
        <tbody>
        {% for data in datas %}
        <tr>
            <td>{{ data.group_serial_number }}</td>
            <td>{{ data.group_name }}</td>
            <td>{{ data.device }}</td>
            <td>{{ data.status }}</td>
            <td>{{ data.first_online }}</td>
            <td>{{ data.last_online }}</td>
            <td>{{ data.last_offline }}</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
-->
    {% endif %}
</div>
{% endblock %}


{% block body_script_block %}
    <script>
        $( ".target" ).change(function() {
            $("#button").click()
        });
    </script>
{% endblock %}
